<template>
  <basic-dialog :visible="show"
                minWidth="700px"
                title="当班超产统计"
                :isShowClose="false"
                @submit="submit"
                is-show-basic-footer
                :has-footer-margin="false"
                :isShowInnerLoading="loading"
                @close="hideDialog">
    <div>
      <div class="info-wrapper">
        <div class="content-wrapper flex justify-between">
          <detail-dialog :headList="headList" :detailData="row" class="font-size-14" :statusList="['ackStatus']">
            <template v-slot:ackStatus>
              <div>
                <set-color :options="$getEnum(Enums.OVER_PRODUCTION_STATUS)" :colorType="row.ackStatus" />
              </div>
            </template>
          </detail-dialog>
        </div>
      </div>
      <q-separator/>
      <q-form ref="form" class="dialog-content" greedy style="padding-bottom: 0">
        <div style="margin: 20px 20px 10px 20px">
          <div class="flex justify-between">
            <q-input
              v-model.trim="form.groupId"
              dense
              outlined
              maxlength="30"
              readonly
              @click="selectWorkOrder"
              placeholder="请选择关联工单"
              :rules="[
              val => val && val.length > 0  || '请选择关联工单'
            ]"
              class="q-field--with-bottom select-width margin-r-15"
            >
              <template v-slot:before>
                <label class="text-right name">
                  <span class="text-red">*</span>
                  <span>关联工单:</span>
                </label>
              </template>
            </q-input>

            <q-input
              v-model.trim="form.processedProducts"
              dense
              outlined
              readonly
              class="q-field--with-bottom select-width"
            >
              <template v-slot:before>
                <label class="text-right name">
                  <span>加工产品:</span>
                </label>
              </template>
            </q-input>
          </div>
          <div class="flex justify-between">
            <q-input
              v-model.trim="form.processingProcedure"
              dense
              outlined
              readonly
              class="q-field--with-bottom select-width"
            >
              <template v-slot:before>
                <label class="text-right name">
                  <span>加工工序:</span>
                </label>
              </template>
            </q-input>
            <q-input
              v-model.trim="form.overNum"
              dense
              outlined
              maxlength="30"
              placeholder="请输入超产数量"
              :rules="[
              val => val && val.length > 0  || '请输入超产数量',
              val => /^\d+?$/.test(val) && val > 0 || '请输入正整数',
              val => judgeCount(val) || '报工数量不能超过当班超产数'
            ]"
              class="q-field--with-bottom select-width"
            >
              <template v-slot:before>
                <label class="text-right name">
                  <span class="text-red">*</span>
                  <span>超产数量:</span>
                </label>
              </template>
            </q-input>
          </div>
          <q-select v-model="form.reporter"
                    :options="peopleOption"
                    dense
                    options-dense
                    emit-value
                    map-options
                    outlined
                    placeholder="请选择报工人员"
                    class="select-width"
                    style="width: 268px"
                    :rules="[ val => val !== '' || ' 请选择报工人员']">
            <template v-slot:no-option>
              <div class="no-option" />
            </template>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span><span>报工人员:</span>
              </label>
            </template>
          </q-select>
        </div>
      </q-form>
    </div>

    <!-- 关联工单 -->
    <AssociatedWorkOrder ref="associatedWorkOrder" :row="row" @confirm="confirmAssociateWorkOrder" />
  </basic-dialog>
</template>

<script>
import AssociatedWorkOrder from './AssociatedWorkOrder'
import { getCheckinOperators, postOverproduceWorkOrders } from '../../../../boot/job/process-order'
export default {
  name: 'FillOverDialog',
  components: {
    AssociatedWorkOrder
  },
  watch: {
    'form.associatedWorkOrder': {
      handler: function (val) {
        if (val) {
          this.getPeopleOption()
        }
      }
    }
  },
  data () {
    return {
      headList: {
        workDate: '生产日期',
        deviceName: '加工设备',
        deviceType: '设备类型',
        shiftName: '加工班次',
        overproduceCount: '超产数量',
        ackStatus: '状态',
        createTime: '创建时间',
        maxOverCount: '可填报数量',
        cycleCount: '循环个数'
      },
      loading: false,
      show: false,
      peopleOption: [],
      row: {},
      form: {
        groupId: '',
        associatedWorkOrder: '',
        processedProducts: '',
        processingProcedure: '',
        overNum: '',
        reporter: ''
      }
    }
  },
  methods: {
    // 显示弹框
    showDialog (row) {
      this.show = true
      row.cycleCount = null
      this.row = row
      Object.assign(this.form, this.$options.data().form)
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 选择关联工单
    selectWorkOrder () {
      this.$refs.associatedWorkOrder.showDialog()
    },

    // 确认关联工单
    confirmAssociateWorkOrder (order) {
      this.row.cycleCount = this.$utils.label(order.processCount)
      this.form.groupId = order.groupId
      this.form.associatedWorkOrder = order.firstWorkOrderId
      this.form.processedProducts = order.materialNames
      this.form.processingProcedure = order.processName
    },

    judgeCount (val) {
      return val <= this.row.maxOverCount
    },

    getPeopleOption () {
      this.form.reporter = ''
      this.peopleOption = []
      getCheckinOperators(this.form.associatedWorkOrder, this.row.shiftId).then(res => {
        const data = res.data
        this.peopleOption = data.map(item => {
          return {
            value: item.operatorId,
            label: item.operator
          }
        })
      })
    },

    submit () {
      this.$refs.form.validate(true).then(result => {
        if (result) {
          const operator = this.peopleOption.find(item => item.value === this.form.reporter)
          const data = {
            fillInCount: this.form.overNum,
            operatorId: this.form.reporter,
            operatorName: operator.label,
            workOrderGroupId: this.form.groupId
          }
          this.loading = true
          postOverproduceWorkOrders(this.row.id, data).then(res => {
            if (res.code === '1200') {
              this.show = false
              this.$emit('success')
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
/deep/ .q-field--outlined.q-field--readonly .q-field__control:before{
  border-style solid
}
.content-wrapper{
  padding 20px 20px 0 20px
}
.select-width{
  width 268px
}
</style>
